前情提要

標題上我為甚麼打了一些看不懂的東西哩?
先想想一個概念，
現在人手一機根本不值得一提，
更多數的人可能有不只一部手機跟無數個電子設備裝置，
能拿來瀏覽網頁的裝置更是琳瑯滿目。
那作為一名網頁設計師要怎麼把網頁配合各種裝置呢?
前情提要到這，今天就來解決這個問題。

正文

RWD

|RWD是甚麼東西|
響應式網頁設計Responsive web design是一種網頁設計技術的名稱。
意思是說，當你設計一個網頁，
在不同的裝置像是平板，手機，電腦(也可能還有其他的行動裝置)，
配合適合的解析度呈現不一樣版面，
這樣就比較不用一直把版面拉大縮小。

Media query

|Media query介紹|
Media query 簡單說就是RWD的實際應用，
配合著不同的裝置做設定，
在不同的框架下呈現不同的視覺效果，
下面介紹一些media query的語法:

• Media query list
  一個程式碼裡面有可能會有很多組你想套用一樣樣式的，
  就可以把它們放在一起用逗點隔開，
  當每個條件都不成立才會錯誤，
  只要有一個可以用就會套用該組樣式。

• Media type:
  單個，多用於print screen speech，
  使用的時機比較不多，
  因為用media feature去選特定的設備的狀態會更方便一點。

• Media feature:
  用於像素，解析度，設備大小這種。0或多個。
  針對設備的狀態。

|Media feature三個用法|

1. Feature name : feature value:
2. Boolean context
   判斷()內的設定結果是true還是false，
   再執行子集合內的程式碼。
3. Max- min- 開頭
   判斷正在使用的裝置是否符合()內的range再執行。

語法有not only and or這些字樣，
很白話的邏輯式表達。
特別要注意only只能使用在media type使用
有些瀏覽器只偵測media type或media feature，
要注意一下使用的時機。

圖片來源

今日小心得

今天的內容比之前都還要多一些，
其實是一個意外啊
有點講不完啊!
我們明天繼續。
原本只是想學習一下關於@content的語法及應用，
應用找一找，便不停地延伸延伸再延伸，
就變成現在這樣了!!